<template>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 管理招聘信息 -->
        <el-tab-pane label="管理招聘信息" name="first">
            <el-table :data="this.dataList" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px ;background-color: #f0f0f0;font-size: 18px;border-radius: 50%;width: 20px;
                        height: 20px;display: block;text-align: center;padding: 10px;">{{ scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发布日期" width="150">
                    <template slot-scope="scope">
                        <span >{{ new Date(scope.row.createTime).toLocaleDateString() }}</span>
                        <br>
                        <span style="font-size: 12px;color:green;">{{ new Date(scope.row.createTime).toLocaleTimeString() }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="工作地点" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.workAddress }}</span>
                        <br>
                        <span style="font-size: 12px;color:green;">{{ new Date(scope.row.createTime).toLocaleTimeString() }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="招聘类型" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type }}</span>
                        <br>
                    </template>
                </el-table-column>
                <el-table-column label="浏览次数" width="120">
                    <template slot-scope="scope">
                        <span style="background-color: aquamarine;padding: 12px;">{{ scope.row.viewCount }}</span>
                        <br>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status }}</span>
                        <br>
                    </template>
                </el-table-column>
                <el-table-column label="标题" prop="address" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.workRequirments }}</span>
                        <br>
                    </template>
                </el-table-column> 
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="" @click="handleUp(scope.$index, scope.row)">置顶</el-button>
                        <el-button
                        size="mini"
                        type="success"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

                        <el-dialog title="编辑内容" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="工作地点" :label-width="formLabelWidth">
                                    <el-input v-model="form.workAddress" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="招聘类型" :label-width="formLabelWidth">
                                    <el-input v-model="form.type" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="状态" :label-width="formLabelWidth">
                                    <el-input v-model="form.status" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="标题" :label-width="formLabelWidth">
                                    <el-input v-model="form.workRequirements" autocomplete="off"></el-input>
                                </el-form-item>
                                
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="update()">确 定</el-button>
                            </div>
                        </el-dialog>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                        <el-dialog
                        title="删除提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">
                        <span>是否删除这一信息</span>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="deleteJobs()" >确 定</el-button>
                        </span>
                        </el-dialog>
                    </template>
                </el-table-column>
                
            </el-table>
            <el-button @click="delAll()">批量删除</el-button>
            <el-pagination background    @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page.sync="currentPage1" layout="total, prev, pager, next"
      :total=this.totalAll></el-pagination>
        </el-tab-pane>
        <!-- 新增招聘信息-->
        <el-tab-pane label="新增招聘信息" name="second">
            <div class="second" >
                <div class="second_top">
                    <h3>岗位名称</h3>
                    <div class="second-input">
                        <!-- 1 -->
                        <div class="second_top_input">
                            <input type="text" placeholder="请输入岗位名称" v-model="jobName">
                            <input type="text" placeholder="请输入岗位名称">
                            <input type="text" placeholder="请输入岗位名称">
                        </div>
                        <!-- 2 -->
                        <div style="display:flex;align-items:flex-start;" class="inputTwo">
                            
                            <div style="text-align: left;margin-right: 20px;" >
                            <h4 style="margin:0 0 10px 0 ;">招聘状态</h4>
                            <div>
                                <el-radio v-model="radio" label="正常发布" style="width: 60px;font-size: 8px;">正常发布</el-radio>
                                <el-radio v-model="radio" label="停止发布">停止发布</el-radio>
                            </div>
                            <h4 style="margin: 10px 0;">招聘类型</h4>
                            <div>
                                <el-radio v-model="radio1" label="校园招聘" style="width: 60px;font-size: 8px;">校园招聘</el-radio>
                                <el-radio v-model="radio1" label="社会招聘">社会招聘</el-radio>
                            </div>
                            </div>
                            <div class="work">
                                <div style="display: flex;align-items: center;">
                                    <h4 style="margin: 10px 0;">工作地点:</h4>
                                    <input type="text" placeholder="请输入工作地点" style="text-align: center;" v-model="jobAddress">
                                </div>
                                <div style="display: flex;align-items: center;">
                                    <h4 style="margin: 10px 0;">投递邮箱:</h4>
                                    <input type="text" placeholder="请输入邮箱" style="text-align: center;" v-model="jobEmail">
                                </div>
                                <div style="display: flex;align-items: center;">
                                    <h4 style="margin: 10px 0;">薪资待遇:</h4>
                                    <input type="text"  class="workPrice" style="margin-right: 6px;">
                                    <input type="text"  class="workPrice" v-model="jobPrice">
                                </div>
                            </div>
                        
                        </div>
                        <!-- 3 -->
                        <div class="inputThree">
                            <div>
                                <div style="display: flex;align-items: center;">
                                    <h4 style="margin: 10px 0;">发布日期</h4>
                                    <input type="text" style="text-align: center;">
                                </div>
                                <div style="display: flex;align-items: center;">
                                    <h4 style="margin: 10px 0;">来源</h4>
                                    <input type="text"  style="text-align: center;">
                                </div>
                                <div style="display: flex;align-items: center;">
                                    <h4 style="margin: 10px 0;">作者</h4>
                                    <input type="text"  style="text-align: center;" v-model="jobUser">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="second_bottom" style="text-align: left;">
                    <h4>编辑内容</h4>
                    <textarea name="" id="" cols="175" rows="10" placeholder="请输入新闻内容" v-model="textarea">

                    </textarea>
                    <div class="btnBox" style="margin-top: 45px;">
                        <button >预览</button>
                        <button @click="addJobs()">提交</button>
                       
                    </div>
                </div>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { getJobManage, deleteJob, updateJob } from "@/request/api/all";
import { addJob } from "@/request/api/all";
import axios from 'axios'
export default {
    data() {
        return {
            currentPage1: 1,
            jobName: "",
            jobAddress: "",
            jobEmail: "",
            jobUser: "",
            radio: '正常发布',
            radio1: '校园招聘',
            activeName: 'first',
            input1: '',
            jobPrice: "",
            textarea: "",
            dataList: [],
            page: 1,
            totalAll: 1,
            id: 0,
            dialogVisible: false,
            dialogFormVisible: false,
            formLabelWidth: '120px',
            form: {},
            id1: 0,
            selectionItems: []
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 置顶
        handleUp(index, row) {
            this.dataList.splice(index, 1);
            this.dataList.unshift(row);
        },
        // 批量删除
        async delAll() {
            console.log(this.selectionItems);
            if (this.selectionItems.length === 0) {
                this.$message({
                    message: '请选择要删除的选项',
                    type: 'warning'
                });
                return;
            }

            // 收集选中项的 ID
            let arr = [];
            this.selectionItems.forEach(item => {
                arr.push(item.id);
            });

            // 构建请求数据
            let data = {
                ids: arr
            };
            console.log('data',data)

            try {
                // 调用删除接口
                let res = await axios({
                    url: '/admin/recruit/deleteRecruits',
                    method: 'delete',
                    data: data
                });
                console.log('删除成功', res);
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                // 刷新数据列表
                this.getJobManages();
            } catch (error) {
                console.error('删除失败', error);
                this.$message({
                    message: '删除失败，请重试',
                    type: 'error'
                });
            }
        },
        // 添加
        addJobs() {
            let addData = {
                "id": 0,
                "issuerBy": this.jobUser,
                "jobEmail": this.jobEmail,
                "positionName": this.jobName,
                "releaseDate": "",
                "salary": 2,
                "status": 0,
                "type": 0,
                "viewCount": 0,
                "workAddress": this.jobAddress,
                "workRequirements": this.textarea
            };
            addJob(addData).then(res => {
                console.log('添加招聘信息', res);
            });
            this.$message({
                message: '添加成功',
                type: 'success'
            });
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        // 修改
        handleEdit(index, row) {
            this.form = row;
            console.log("编辑", row);
            this.dialogFormVisible = true;
        },
        handleDelete(index, id) {
            console.log(id);
            this.id = id;
            console.log("dangqian ", this.id);
            this.dialogVisible = true;
        },
        handleSelectionChange(selection) {
            this.selectionItems = selection;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val;
            this.getJobManages();
        },
        // 渲染页面 
        getJobManages() {
            let getJobData = {
                pageNum: this.page,
                pageSize: 10
            };
            getJobManage(getJobData).then(res => {
                console.log('管理招聘信息', res.data);
                this.dataList = res.data.rows;
                this.totalAll = res.data.total;
            });
        },
        // 编辑内容
        async update() {
            let formData = {
                "id": this.form.id,
                "jobEmail": 'eee',
                "positionName": 'ddd',
                "salary": 0,
                "status": 0,
                "type": 0,
                "viewCount": 0,
                "workAddress": this.form.workAddress,
                "workRequirements": this.form.workRequirements
            };
            console.log("编辑内容", this.form);
            this.dialogFormVisible = false;
            let res = await updateJob(formData);
            console.log('编辑res', res);
        },
        // 跳转添加页面
        goAddJob() {
            this.$router.push({
                path: '/addJob.vue'
            });
        },
        // 删除
        async deleteJobs() {
            this.dialogVisible = false;
            let res = await deleteJob(this.id);
            this.getJobManages();
        }
    },
    created() {
        this.getJobManages();
    }
};
</script>

<style scoped>
.el-tabs {
    background: #fff;
}
.el-tabs .is-active {
    background: #2567ff;
    color: #fff;
}
.body {
    margin: 0;
    padding: 0;
}
.second .second_top {
    height: 150px;
    padding-right: 10px;
}
.second .second_top h3 {
    font-size: 16px;
    text-align: left;
    width: 70px;
    margin: 0;
}
.second .second-input {
    display: flex;
    justify-content: space-between;
}
.second .second_top_input {
    margin-top: 20px;
    width: 500px;
}
.second .second_top_input input {
    width: 142px;
    height: 60px;
    border: 0px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
    opacity: 1;
    background: #F6F8FB;
    box-sizing: border-box;
    border: 1px solid #E0E8F4;
}
.inputTwo h4 {
    font-family: Roboto;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    color: #223354;
}
.inputTwo .work input {
    width: 112px;
    height: 30px;
    border: 0px;
    border-radius: 5px;
    opacity: 1;
    background: #EFF1F8;
}
.work h4 {
    font-family: Roboto;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    color: #223354;
}
.inputTwo .work .workPrice {
    width: 60px !important;
    height: 30px !important;
}
.inputThree h4 {
    width: 52px;
    font-family: Roboto;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    display: flex;
    align-items: center;
    letter-spacing: 0px;
    color: #223354;
}
.inputThree input {
    border-radius: 5px;
    opacity: 1;
    background: #EFF1F8;
    width: 70px;
    height: 24px;
    border: 0px;
}
.second_bottom {
    padding: 37px 0 100px 20px;
}
.second_bottom > h4 {
    text-align: left;
    margin: 0;
    margin-bottom: 28px;
}
.second_bottom .btnBox {
    width: 100%;
    text-align: center;
}
.second_bottom button {
    border: 0px;
    height: 40px;
    width: 120px;
    border-radius: 5px;
    opacity: 1;
    background: #EFF1F8;
    margin-right: 30px;
}
</style>